<template>
  <div>
    <div id="buttons" class="cehuimain" style="z-index: 99999;position:absolute">
      <span>
        <input type="button" value="测量线" id="measureline" @click="allTestFunc('measureline')" />
        <input
          type="button"
          value="测量多边形"
          id="measurepolygon"
          @click="allTestFunc('measurepolygon')"
        />
        <input type="button" value="取消测量" id="cancel" @click="allTestFunc('cancel')" />
        <input type="button" value="完成测量" id="finish" @click="allTestFunc('finish')" />
        <input type="button" value="清除测量" id="clear" @click="allTestFunc('clear')" />
      </span>
      <br>
      <span style="background-color:white; ">
          X: {{longitude}}
      </span>
      <br>
      <span style="background-color:white; ">
          Y: {{latitude}}
      </span>     
      <span style="background-color:white; ">
          级别: {{level}}
      </span>         
    </div>
  </div>
</template>
<script lang="ts">
import { Vue, Component, Prop, Watch } from 'vue-property-decorator';
import MapCommon from '@/util/MapCommon';
import GISToolComponent from './GISToolComponent';

@Component({
  name: 'GisMeaComponnet',
  mixins: [MapCommon],
})
export default class GisMeaComponnet extends Vue {
  @Prop() public options: any;
  // 监听地图初始化
  public gisToolComponent: any;
  private longitude: string = '';
  private latitude: string = '';
  private level: string = '';
  private mounted() {
    // 获取地图，地图加载完成后进入回调
    const self: any = this;
    self.resolveMap('map').then((event: any) => {
      this.initMeasure(event.map);
      this.initMousePosition(event.map);
      this.initCurrentLevel(event.map);
    });
  }

  private allTestFunc(type: any) {
    // 测距的显示内容，需返回要显示的html字符串
    switch (type) {
      case 'measureline':
        this.gisToolComponent.measureLength();
        break;
      case 'measurepolygon':
        this.gisToolComponent.measureArea();
        break;
      case 'finish':
        this.gisToolComponent.finish();
        break;
      case 'cancel':
        this.gisToolComponent.cancel();
        break;
      case 'clear':
        this.gisToolComponent.clear();
        break;
    }
  }
  private initMeasure(map?: any) {
    const temp: any = this;
    const GISComponents = temp.$ioc.resolve('GISModules-map');
    this.gisToolComponent = GISComponents.common.getComponent('GISToolComponent');
    this.gisToolComponent.load();
  }

  private initMousePosition(map: any) {
      if (!this.gisToolComponent) {
        const temp: any = this;
        const GISComponents = temp.$ioc.resolve('GISModules-map');
        this.gisToolComponent = GISComponents.common.getComponent('GISToolComponent');
        this.gisToolComponent.load();
      }
      const mousePositionComp = this.gisToolComponent.mousePosition;
      mousePositionComp.on('mousePosition', this.onMousePosition, this);
  }
  private onMousePosition(event: any) {
    this.longitude = event.x;
    this.latitude = event.y;
  }

  private initCurrentLevel(map: any) {
    if (!this.gisToolComponent) {
        const temp: any = this;
        const GISComponents = temp.$ioc.resolve('GISModules-map');
        this.gisToolComponent = GISComponents.common.getComponent('GISToolComponent');
        this.gisToolComponent.load();
    }
    this.level = this.gisToolComponent.currentLevel;
    this.gisToolComponent.on('levelChanged', this.showLevel, this);
  }
  private showLevel(event: any) {
    this.level = event.level;
  }
}
</script>
<style lang="less">
.emap-measure-node-tooltip {
  display: none;
  background-color: #fff;
  box-shadow: 0 1px 4px rgba(0, 0, 0, 0.2);
  filter: drop-shadow(0 1px 4px rgba(0, 0, 0, 0.2));
  padding: 1px;
  border-radius: 1px;
  border: 1px solid #7b7878;
  font-size: 12px;
  color: #7b7878;
}
.emap-measure-tooltip {
  display: none;
  background-color: #fff;
  box-shadow: 0 1px 4px rgba(0, 0, 0, 0.2);
  filter: drop-shadow(0 1px 4px rgba(0, 0, 0, 0.2));
  padding: 3px;
  border-radius: 1px;
  border: 1px solid #c80000;
  font-size: 12px;
  color: #000;
  font-weight: bold;
}
</style>
